import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { renderRoutes } from 'react-router-config';
import { Layout, Menu } from 'antd';
const { SubMenu, Item } = Menu;

export default class Trade extends Component {
  state = {
    menuData: [
      {
        key: 'sub1',
        name: '交易管理',
        children: [
          {
            key: 'sub1_1',
            name: '所有订单',
            url: '/seller/trade/order',
          },
        ],
      },
      {
        key: 'sub2',
        name: '交易方式',
        children: [
          {
            key: 'sub2_1',
            name: '分阶段交易',
            url: '/seller/trade/phased-transaction',
          },
        ],
      },
      {
        key: 'sub3',
        name: '评价管理',
        children: [
          {
            key: 'sub3_1',
            name: '收到的评价',
            url: '/seller/trade/estimate',
          },
        ],
      },
      {
        key: 'sub4',
        name: '退款维权',
        children: [
          {
            key: 'sub4_1',
            name: '退货退款管理',
          },
          {
            key: 'sub4_2',
            name: '投诉管理',
          },
        ],
      },
      {
        key: 'sub5',
        name: '发票管理',
        children: [
          {
            key: 'sub5_1',
            name: '开票设置',
          },
          {
            key: 'sub5_2',
            name: '已申请发票',
          },
        ],
      },
      {
        key: 'sub6',
        name: '物流管理',
        children: [
          {
            key: 'sub6_1',
            name: '物流设置',
            url: '/seller/trade/logistics-setting',
          },
          {
            key: 'sub6_2',
            name: '申请物流',
            url: '/seller/trade/logistics-apply',
          },
          {
            key: 'sub6_3',
            name: '物流进度',
            url: '/seller/trade/logistics-schedule',
          },
          {
            key: 'sub6_4',
            name: '报价单管理',
          },
        ],
      },
      {
        key: 'sub7',
        name: '结算账务中心',
        children: [
          {
            key: 'sub7_1',
            name: '交易收支查询',
          },
        ],
      },
      {
        key: 'sub8',
        name: '保障服务',
        children: [
          {
            key: 'sub8_1',
            name: '我的保障金',
          },
        ],
      },
    ],
  };

  handleClick = e => {
    console.log('click ', e);
  };

  render() {
    const { menuData } = this.state;

    const loopfun = data => {
      return data.map((e, i) => {
        if (e.children) {
          return (
            <SubMenu key={e.key} title={e.name}>
              {loopfun(e.children)}
            </SubMenu>
          );
        } else if (e.url) {
          return (
            <Item key={e.key}>
              <Link to={e.url}>{e.name}</Link>
            </Item>
          );
        }
        return <Item key={e.key}>{e.name}</Item>;
      });
    };

    return (
      <Layout style={{ height: '100%' }} hasSider>
        <Layout.Sider
          width={170}
          style={{
            overflow: 'auto',
            height: '100%',
            backgroundColor: '#fff',
          }}
        >
          <Menu
            onClick={this.handleClick}
            defaultSelectedKeys={[ 'sub1_1' ]}
            defaultOpenKeys={menuData.map(i => {
              return i.key;
            })}
            mode="inline"
          >
            {loopfun(menuData)}
          </Menu>
        </Layout.Sider>
        <Layout>
          <Layout.Content style={{ overflow: 'auto', height: '100%' }}>
            {renderRoutes(this.props.route.routes)}
          </Layout.Content>
        </Layout>
      </Layout>
    );
  }
}
